코드 밖 커뮤니케이션 정리 1 - 시각적 커뮤니케이션

커뮤니케이션에 대한 워딩에 끌려서 산 책. 막상 사고나서 보니, 지금 내 상황에 적절한 책은 아니었다. 그래도 이번에 다이어그램을 그려보고 싶은 마음에 파트원 부분을 다시 읽기 시작했다. 아래 C4 모델이 흥미로워서 다이어그램 그릴 때 참고해봐야지.

시각적 커뮤니케이션

소프트웨어 아키텍처와 디자인의 시각적 요소는 중요한 정보를 전달한다. 독자의 시선은 자연스럽게 시각적 요소에 끌림.

독자 이해하기

• 누가 읽을 것인지? 독자의 요구 사항이 무엇인지?

UML 클래스 다이어그램

• 개발자, 아키텍트, 데이터베이스 관리자 등 IT 독자를 겨냥
• PO or PM에게는 해당 다이어그램 정보가 필요하지 않을 수 있음.

C4 컨텍스트 다이어그램

• 활용도 높음. 시스템의 전반적인 그림 보여줌. IT 독자나 비즈니스 독자 모두에게 적합
• PO, PM, 아키텍트, 개발자, 비즈니스 애널리스트 모두에게 적합

도메인 스토리 다이어그램

• 고객이 원하는 게 무엇인지?
• 내가 고객으로부터 원하는 게 무엇인지?
• 고객의 기술적 이해력은 어느 수준인지?
• 고객은 어느 정도의 상세함을 원하는지?

추상화 레벨 혼합

• 개발과 같이, 필요한 정보를 한 다이어그램에 전부 넣는 것은 어지럽고 혼란스러울 수 있음

C4 모델

1. 시스템 컨텍스트
   1. 시스템의 개요, 시스템과 다른 개체들 간의 상호작용을 포함하여 그것이 환경에 어떻게 적합한지 보여준다.
2. 컨테이너 레벨
   1. 연관 있는 소프트웨어 시스템을 확대해서 상위 컴포넌트를 보여주거나, 블록을 구성해 글외부 개체의 상호작용을 보여줌
3. 컴포넌트 레벨
   1. 컨테이너 내의 컴포넌트와 컴포넌트 간의, 그리고 컴포넌트와 외부 개체의 상호 작용
4. 코드 레벨

예제) https://lucid.app/lucidchart/743bd105-828a-439f-bf77-2596511b731a/view?anonId=0.6c0631e192d38c4fc7&sessionDate=2024-10-28T14%3A34%3A19.803Z&sessionId=0.0de47c08192d38c4fc8&fromMarketing=true&page=0_0#

표현의 일관성

• 독자는 다이어그램이 서로 어떻게 연관되어 있는지 쉽게 이해할 수 있어야 한다.

데이터 흐름도

• 숫자, 문자를 사용해 구성 요소를 설명한다.

접근성

• 색상, 대비도 고려해야 다이어그램의 접근성을 높일 수 있다.
  • 색맹, 부분 시력 등 고려 필요
  • https://www.whocanuse.com/
• 색상에 의존한 커뮤니케이션: 안티패턴
  • 패턴을 사용할 수 있다.
  • 빨간색 상자 → 빗금이 쳐진 상자

내러티브

• 큰 그림 먼저
• 컨텍스트를 제공하지 않으면 독자를 읽게 되고, 그들의 원하는 반응을 얻을 가능성도 낮아짐
• 다이어그램과 보충 자료는 큰 그림에서 시작하여 내러티브를 구성하는 방식으로 순서화해야 한다.

다이어그램 흐름을 기대에 맞추기

• 책을 볼 때 텍스트가 왼쪽 상단 → 오른쪽 하단으로 끝나는 것으로 예상한다. 다이어 그램의 경우에도 그래야 함
• 다이어그램의 초점이나 시작 부분을 왼쪽 상단 또는 왼쪽 가운데에 두는 것이 훨씬 더 가독성이 좋다.

명확한 관계

• 다이어그램에는 구성 요소(컨테이너, 프로세스 등) + 구성 요소 간의 관계(화살표, 그룹화 등) 2가지 주요 요소.
  • 독자는 관계를 통해 스토리를 이해하기 때문에 “명확한 관계 패턴”이 중요.
• 단방향으로 관계를 나타내는 것이 가장 좋음
• 화살표나 상자에 점선이나 파선을 사용하는 등 패턴과 색상을 사용해 관계를 더 명확히 나타낼 수 있음
  • 이와 같은 방식으로 관계의 의미를 표시할 때는 범례를 추가해야 한다.